<template>
    <div class="container"  v-if="step===1">
         <h1 class="colorful-text">正在进行身份认证中...</h1>
    </div> 

    <div v-if="step===2" style="width: 1600px;">
        <el-container>
            <el-aside width="200px" >
                <el-scrollbar >
                    <el-menu style="height: 740px;" :default-openeds="['1']" router>
                        <el-sub-menu index="1">
                            <template #title>
                                管理界面
                            </template>
                            <el-menu-item index="/admin/problem">
                                题目管理
                            </el-menu-item>
                            <el-menu-item index="/admin/user">
                                用户管理
                            </el-menu-item>
                            <el-menu-item index="/admin/exam">
                                考试管理
                            </el-menu-item>

                            <el-menu-item index="/admin/rolePower">
                                权限角色管理
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>

                    <div >
                        <img class="img" src="../../assets/back.png" @click="$router.push('/home')">
                    </div>
                </el-scrollbar>
            </el-aside>

            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </div>




</template>

<script setup lang="ts">
    import { onMounted,onUnmounted} from 'vue';
    import useAdmin from '@/hooks/admin/useAdmin'
    import useProblem from '@/hooks/useProblem';

    const {}=useProblem()
    const {step,check}=useAdmin()
    onMounted(()=>{
        setTimeout(()=>{check()},500)
    })


</script>


<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.colorful-text {
    display: inline-block; 
    animation: colorChange 5s infinite;
}
@keyframes colorChange {
    0% { color: red; }
    20% { color: orange; }
    40% { color: yellow; }
    60% { color: green; }
    80% { color: blue; }
    100% { color: purple; }
}


.img{
    margin-left: 50px;
    width: 50px;
    cursor: pointer;
}
</style>